<style>
    div .page-header-new{
        width:100%;
        height:50px;
        min-height:50px!important;
        line-height:50px;
        border-bottom:1px solid #0A0A0A!important;
    }
    .btn-header{
        border-radius: 0.5em;
        font-size:12px!important;
        margin-left:20px;
        margin-right:20px;
        background-color:#ffffff;
        border: 1px solid #666666;
    }
    .btn-friend{
        margin-left:80px;
    }
    .btn-active{
        background-color:#5dc2f1;
        border:none!important;
    }
    .btn{
        padding-left:30px!important;
        padding-right: 30px!important;
    }
    .title{
        font-size:20px;
        margin-left:50px;
        color:#0A0A0A;
    }
    #content-view{
        margin-top:20px;
    }
    .todoDiv{
        margin-left:80px;
    }
    .ToDo{
        border-radius: 2em!important;
        margin-left:40px;
        margin-right:0;
    }
    /*日历农历展示*/
    .fc-grid .fc-day-number{padding: 0 2px; position:relative}
    .fc-grid .fc-day-number span.solarday{float:right;color:#999}
    .fc-grid .fc-day-number span.holiday{float:right;color:#ee162d}
    /*日历月视图展示文字去粗*/
    .fc-grid .fc-event-time{
        font-weight: 400;
    }


    /*待办展示*/
    .table-style{
        margin:10px 50px;
        /*background-color:#ffffff;*/
    }
    .important-img{
        width:15px;
        height:15px;
    }
    #calendar-view-new{
        background-color:#ffffff!important;
    }
</style>
<div id="calendar-view-new" class="container" style="margin:0 0 0 0;padding:0 0 0 0">
    <div class="row page-header-new" style="margin:0 0 0 0">
        <div class="pull-left title" style="cursor:pointer">
            <div ng-show="state==1">日历</div>
            <div ng-show="state==2"><span ng-click="changeState(1)">日历</span>&nbsp;> 我的待办</div>
            <div ng-show="state==3"><span ng-click="changeState(1)">日历</span>&nbsp;> 我的事项列表</div>
            <div ng-show="state==4"><span ng-click="changeState(1)">日历</span>&nbsp;> {{currentFriendName}} 的日程</div>
        </div>
        <div class="pull-right">
            <button class="{{state==1?'btn btn-header btn-active':'btn btn-header'}}" ng-click="changeState(1)">我的日程</button>
            <button class="{{state==2?'btn btn-header btn-active':'btn btn-header'}}" ng-click="changeState(2)">我的待办</button>
            <button class="{{state==3?'btn btn-header btn-active':'btn btn-header'}}" ng-click="changeState(3)">事项列表</button>
            <button class="{{state==4?'btn btn-header btn-active btn-friend':'btn btn-header btn-friend'}}" ng-click="changeState(4);">好友日程</button>
        </div>
    </div>
    <div class="row" id="content-view" ng-show="state==1">
        <div id='calendar' style="padding-left:20px;padding-right:20px;"></div>
    </div>
    <div class="row" ng-show="state==2">
        <div class="row page-header-new">
            <div class="pull-left todoDiv">
                <button class="{{toDoState==1?'btn btn-header ToDo btn-active':'btn btn-header ToDo'}}" ng-click="changeToDoState(1)">今天</button>
                <button class="{{toDoState==2?'btn btn-header ToDo btn-active':'btn btn-header ToDo'}}" ng-click="changeToDoState(2)">全部</button>
                <button class="{{toDoState==3?'btn btn-header ToDo btn-active':'btn btn-header ToDo'}}" ng-click="changeToDoState(3)">拖延</button>
            </div>
            <div class="pull-right">
                <button class="btn btn-header btn-active" style="margin-right:80px" ng-click="editClip('xxx',4)">新建待办</button>
            </div>
        </div>
        <div class="row">
            <div class="table-style">
                <table class="datatable table table-hover dataTable">
                    <thead>
                    <tr>
                        <th style="width:15%"><input type="checkbox" ng-click="selectAll($event)" ng-checked="isSelectedAll()"/>#</th>
                        <th style="width:30%" class="{{orderKey!='name'?'sorting':reverse?'sorting_desc':'sorting_asc'}}" ng-click="orderByKey('name',$event)">名称</th>
                        <th style="width:20%" class="{{orderKey!='startTime'?'sorting':reverse?'sorting_desc':'sorting_asc'}}" ng-click="orderByKey('startTime',$event)">开始时间</th>
                        <th style="width:20%" class="{{orderKey!='endTime'?'sorting':reverse?'sorting_desc':'sorting_asc'}}" ng-click="orderByKey('endTime',$event)">结束时间</th>
                        <th style="width:15%" class="{{orderKey!='isImportant'?'sorting':reverse?'sorting_desc':'sorting_asc'}}" ng-click="orderByKey('isImportant',$event)">重要</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="item in displayToDo|orderBy:orderList:reverse">
                        <td><input type="checkbox" name="selected" ng-checked="isSelected(item.id)" ng-click="updateSelection($event,item.id)"/>{{$index+1}}</td>
                        <td ng-click="editClip(item,5)">{{item.name}}</td>
                        <td ng-click="editClip(item,5)">{{item.startTime|date:"MM月dd日"}} {{weekDayDisplay(item.startTime)}}</td>
                        <td ng-click="editClip(item,5)">{{item.endTime|date:"MM月dd日"}} {{weekDayDisplay(item.endTime)}}</td>
                        <td><img ng-show="item.isImportant" class="important-img" src="assets/img/important.png"/></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="row" ng-show="state==3">
        <div class="row page-header-new">
            <div class="pull-left todoDiv">
                <button class="{{agendaState==1?'btn btn-header ToDo btn-active':'btn btn-header ToDo'}}" ng-click="changeAgendaState(1)">草稿</button>
                <button class="{{agendaState==2?'btn btn-header ToDo btn-active':'btn btn-header ToDo'}}" ng-click="changeAgendaState(2)">确认</button>
                <button class="{{agendaState==3?'btn btn-header ToDo btn-active':'btn btn-header ToDo'}}" ng-click="changeAgendaState(3)">完成</button>
                <button class="{{agendaState==4?'btn btn-header ToDo btn-active':'btn btn-header ToDo'}}" ng-click="changeAgendaState(4)">拖延</button>

            </div>
            <div class="pull-right row">
                <input type="text" class="form-control ng-pristine ng-valid ng-empty ng-touched" placeholder="搜索" ng-model="searchName" style="width:auto;display:inline">
                <button class="btn btn-header btn-active" style="margin-right:80px">新建事项</button>
            </div>
        </div>
        <div class="row">
            <div class="table-style">
                <table class="datatable table table-hover dataTable">
                    <thead>
                    <tr>
                        <th style="width:15%"><input type="checkbox" ng-click="selectAll1($event)" ng-checked="isSelectedAll1()"/>#</th>
                        <th style="width:20%" class="{{orderKey!='name'?'sorting':reverse?'sorting_desc':'sorting_asc'}}" ng-click="orderByKey('name',$event)">名称</th>
                        <th style="width:20%" class="{{orderKey!='startTime'?'sorting':reverse?'sorting_desc':'sorting_asc'}}" ng-click="orderByKey('startTime',$event)">开始时间</th>
                        <th style="width:20%" class="{{orderKey!='endTime'?'sorting':reverse?'sorting_desc':'sorting_asc'}}" ng-click="orderByKey('endTime',$event)">结束时间</th>
                        <th style="width:15%" class="{{orderKey!='isImportant'?'sorting':reverse?'sorting_desc':'sorting_asc'}}" ng-click="orderByKey('isImportant',$event)">重要</th>
                        <th style="width:10%" class="{{orderKey!='level'?'sorting':reverse?'sorting_desc':'sorting_asc'}}" ng-click="orderByKey('level',$event)">类型</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="item in displayAgenda|orderBy:orderList:reverse|filter:searchName">
                        <td><input type="checkbox" name="selected" ng-checked="isSelected1(item.id)" ng-click="updateSelection1($event,item.id)"/>{{$index+1}}</td>
                        <td ng-click="editClip(item,2)">{{item.name}}</td>
                        <td ng-click="editClip(item,2)">{{item.startTime|date:"MM月dd日 HH:mm"}} {{weekDayDisplay(item.startTime)}}</td>
                        <td ng-click="editClip(item,2)">{{item.endTime|date:"MM月dd日 HH:mm"}} {{weekDayDisplay(item.endTime)}}</td>
                        <td ng-click="editClip(item,2)">
                            <img ng-show="item.isImportant" class="important-img" src="assets/img/important.png"/>
                        </td>
                        <td ng-click="editClip(item,2)">
                            <button ng-show="item.level==0" class="btn btn-xs btn-warning">日程</button>
                            <button ng-show="item.level==1" class="btn btn-xs btn-success">待办</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="row" ng-show="state==4" style="margin-top:20px">
        <div id='calendar1' style="padding-left:20px;padding-right:20px;"></div>
    </div>
</div>